<!-- ------------------------------------------------------------------------- -->
<!-- ------------------------------------------------------------------------- -->
<!-- ---------------------- 流调管理--确诊病例管理 ---------------------------- -->
<!-- ------------------------------------------------------------------------- -->
<!-- ------------------------------------------------------------------------- -->

<template>
  <div class="box">
    <div class="banner-box">
      <div class="crumbs-box">
        <div class="crumbs">信息登记 / 确诊病例登记</div>
      </div>
      <!-- 表单 -->
      <div class="form">
        <!-- 表单第一行 -->
        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          size="large"
        >
          <el-form-item>
            <div class="form-text">姓名:</div>
            <el-input v-model="formInline.name" placeholder="请输入" />
          </el-form-item>

          <el-form-item>
            <div class="form-text">性别:</div>
            <el-select placeholder="请选择" v-model="formInline.sex">
              <el-option label="男" value="shanghai" />
              <el-option label="女" value="beijing" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <div class="form-text">身份证号:</div>
            <el-input placeholder="请输入" v-model="formInline.IDNumber" />
          </el-form-item>
        </el-form>

        <!-- 表单第二行 -->
        <el-form :inline="true" class="demo-form-inline" size="large">
          <el-form-item>
            <div class="form-text">联系电话:</div>
            <el-input placeholder="请输入" v-model="formInline.tel" />
          </el-form-item>
          <el-form-item>
            <div class="form-text">户籍地:</div>
            <el-input
              placeholder="请输入"
              v-model="formInline.registeredResidence"
            />
          </el-form-item>
          <el-form-item>
            <div class="form-text">现居地:</div>
            <el-input
              placeholder="请输入"
              v-model="formInline.currentResidence"
            />
          </el-form-item>
        </el-form>

        <!-- 表单第三行 -->
        <el-form :inline="true" class="demo-form-inline" size="large">
          <el-form-item>
            <div class="form-text">病例类型:</div>
            <el-select placeholder="请选择" v-model="formInline.caseType">
              <el-option label="普通病例" value="chengdu" />
              <el-option label="协查病例" value="shanghai" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="form-text">登记人:</div>
            <el-input placeholder="请输入" v-model="formInline.registrant" />
          </el-form-item>
          <el-form-item>
            <div class="form-text">登记日期:</div>
            <div class="demo-date-picker">
              <div class="block">
                <el-date-picker
                  v-model="value2"
                  type="date"
                  placeholder="请选择"
                  :disabled-date="disabledDate"
                  :size="size"
                  style="width: 300px"
                />
              </div>
            </div>
          </el-form-item>
        </el-form>
        <!-- 查询重置按钮 -->
        <div class="button-box">
          <el-row class="mb-4">
            <el-button type="primary" size="large" @click="search"
              >查询</el-button
            >
            <el-button size="large">重置</el-button>
          </el-row>
        </div>
      </div>

      <!-- 表格 -->
      <div class="table">
        <!-- 表格布局 -->
        <div class="table-box">
          <!-- 表格上面 -->
          <div class="table-top">
            <el-row class="mb-4">
              <el-button
                type="primary"
                size="large"
                @click="dialogFormVisible = true"
                >新增</el-button
              >
              <!-- 弹出框 -->
              <teleport to="body">
                <el-dialog
                  v-model="dialogFormVisible"
                  title="新增确诊病例"
                  width="550px"
                  class="dialog-box"
                >
                  <el-form>
                    <el-form-item label="姓名:" :label-width="formLabelWidth">
                      <el-input v-model="addFormName" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="性别:" :label-width="formLabelWidth">
                      <el-radio-group v-model="addFormSex">
                        <el-radio label="男" />
                        <el-radio label="女" />
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item
                      label="出生日期:"
                      :label-width="formLabelWidth"
                    >
                      <el-date-picker
                        v-model="addBirth"
                        type="date"
                        placeholder="Pick a date"
                        :default-value="new Date(2010, 9, 1)"
                        style="width: 305px"
                      />
                    </el-form-item>
                    <el-form-item
                      label="身份证号/护照号:"
                      :label-width="formLabelWidth"
                      style="margin-right: 100px; width: 500px"
                    >
                      <el-input v-model="addFormPostId" />
                    </el-form-item>

                    <el-form-item
                      label="手机号:"
                      :label-width="formLabelWidth"
                      style="margin-right: 100px; width: 500px"
                    >
                      <el-input v-model="addFormTel" />
                    </el-form-item>

                    <el-form-item
                      label="户籍地址:"
                      :label-width="formLabelWidth"
                      v-model="addBirth"
                      style="margin-right: 100px; width: 500px"
                    >
                      <el-input v-model="addFormAddress" />
                    </el-form-item>
                  </el-form>
                  <template #footer>
                    <span class="dialog-footer">
                      <el-button @click="dialogFormVisible = false"
                        >取消</el-button
                      >
                      <el-button type="primary" @click="sureAdd">
                        确定
                      </el-button>
                      <el-button type="primary" @click="gotoEdit">
                        继续编辑
                      </el-button>
                    </span>
                  </template>
                </el-dialog>
              </teleport>

              <el-button style="width: 130px" size="large" @click="daoExcel"
                >EXCEL导出</el-button
              >
              <el-button style="width: 130px" size="large">EXCEL导入</el-button>
              <div class="download">下载模板</div>
            </el-row>
          </div>
          <!-- 表格中间 -->
          <div class="table-banner">
            <el-table
              :data="list"
              style="width: 100%"
              border="true"
              :row-style="tableRowStyle"
              :header-cell-style="{
                background: '#f5f5f5',
                color: '#606266',
                height: '60px',
              }"
            >
              <el-table-column
                label="序号"
                width="180"
                align="center"
                style="line-height: 60px"
              >
                <template #default="{ $index }">
                  {{ (currentPage4 - 1) * pageSize4 + $index + 1 }}
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="姓名"
                width="180"
                align="center"
              />
              <el-table-column
                prop="numberOfCloseContacts"
                label="次密人数"
                width="180"
                align="center"
              />
              <el-table-column
                prop="sex"
                label="性别"
                width="180"
                align="center"
              />
              <el-table-column
                prop="postId"
                label="身份证号"
                width="180"
                align="center"
              />
              <el-table-column
                prop="tel"
                label="联系电话"
                width="180"
                align="center"
              />
              <el-table-column
                prop="registeredResidence"
                label="户籍地"
                width="180"
                align="center"
              />
              <el-table-column
                prop="currentResidence"
                label="现居地"
                width="180"
                align="center"
              />
              <el-table-column
                prop="caseType"
                label="病例类型"
                width="180"
                align="center"
              />
              <el-table-column
                prop="registrant"
                label="登记人"
                width="180"
                align="center"
              />
              <el-table-column
                prop="registrationDate"
                label="登记日期"
                width="180"
                align="center"
              />
              <!-- 表格固定列 -->
              <el-table-column
                fixed="right"
                label="操作"
                width="300"
                align="center"
              >
                <template #default="scoped">
                  <el-button
                    style="width: 50px; font-size: 15px"
                    link
                    type="primary"
                    size="small"
                    @click="editBtn(scoped.row)"
                    >编辑</el-button
                  >

                  <el-button
                    style="width: 50px; font-size: 15px"
                    link
                    type="primary"
                    size="small"
                    @click="deleteTable(scoped.row)"
                    >删除</el-button
                  >
                  <el-button
                    style="width: 50px; font-size: 15px"
                    link
                    type="primary"
                    size="small"
                    @click="Detail"
                    >查看详情</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 表格下面 分页 -->
          <div class="table-footer">
            <div class="demo-pagination-block">
              <el-pagination
                v-model:current-page="currentPage4"
                v-model:page-size="pageSize4"
                :page-sizes="[15, 20, 25, 30]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total,  prev, pager, next,sizes, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <router-view></router-view>
</template>

<script lang="ts">
// import { defineComponent } from "vue";
import { onMounted, reactive, ref, toRefs } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";

import axios from "@/util/http";
import Excel from "@/util/Excel";
// import { id } from "element-plus/es/locale";

export default {
  name: "ConfirmedCase",
  components: {},
  setup() {
    const router = useRouter();

    const dialogFormVisible = ref(false); //新增弹出框取消确定按钮关闭弹窗
    const formLabelWidth = "140px"; //新增弹出框宽度
    const value2 = ref(""); //登记日期选择
    const size = ref<"default" | "large" | "small">("large"); //登记日期时间选择器大小
    //分页
    const currentPage4 = ref(1); // 初始当前页选择页码
    const pageSize4 = ref(10); // 每页几条数据
    const small = ref(false); // 是否使用小型分页样式
    const background = ref(true); // 是否为分页按钮添加背景色
    const disabled = ref(false); // 是否禁用分页

    /* 新增 */
    let addFormName = ref("");
    let addFormSex = ref("");
    let addFormPostId = ref("");
    let addFormTel = ref("");
    let addFormAddress = ref("");
    let addBirth = ref("");

    // const dialogTableVisible = ref(false);  暂时不知道有什么用

    let tableList = reactive({
      list: [] as any,
      total: ref(),
    });
    onMounted(() => {
      axios({
        method: "get",
        url: `patient/findAllPatient`,
        params: {
          currentPage: currentPage4.value,
          pageSize: pageSize4.value,
        },
      }).then((res) => {
        console.log(res, "onmo");

        tableList.list = res.data.data;
        tableList.total = res.data.count;
      });
    });

    //搜索
    const search = () => {
      console.log(formInline);

      axios({
        method: "get",
        url: "patient/findPatientByCondition",
        params: {
          currentPage: currentPage4.value,
          pageSize: pageSize4.value,
          name: formInline.name,
        },
      }).then((res) => {
        console.log(res);

        tableList.list = res.data.data;
        tableList.total = res.data.count;
      });
    };

    /* 确定新增 */
    const sureAdd = () => {
      axios({
        method: "post",
        url: "patient/addPatient",
        params: {
          name: addFormName.value,
          sex: addFormSex.value,
          birthday: addBirth.value,
          idNum: addFormPostId.value,
          phoneNum: addFormTel.value,
          residenceAddress: addFormAddress.value,
        },
      }).then((res) => {
        console.log(res);
      });

      dialogFormVisible.value = false;
    };

    /* 导出 */
    const titleArr = [
      "序号",
      "姓名",
      "次密人数",
      "性别",
      "身份证号",
      "联系电话",
      "户籍地",
      "现居地",
      "病理类型",
      "登记人",
      "登记日期",
    ];
    const daoExcel = () => {
      Excel(tableList, "test", titleArr, "biao");
      // let worksheet:WorkSheet=XLSX.utils.aoa_to_sheet(tableData);
      // let workbook=XLSX.utils.book_new();
      // XLSX.utils.book_append_sheet(workbook,worksheet,"tt")
      console.log("成功啦");
    };

    /* 搜索重置-------------------------- */
    // 表单数据---搜索重置模块
    let formInline = reactive({
      name: "",
      sex: "",
      IDNumber: "",
      tel: "",
      registeredResidence: "", //户籍地
      currentResidence: "", //现居地
      caseType: "", //病例类型
      registrant: "", //登记人
      registrationDate: "", //登记日期
    });

    //登记日期禁用函数
    const disabledDate = (time: Date) => {
      return time.getTime() > Date.now();
    };

    /* 新增----------------------- */
    //表单数据---新增表单的数据
    // let addForm = reactive({
    //   name: "",
    //   sex: "",
    //   // birthday: "",
    //   postId: "",
    //   tel: "",
    //   address: [],
    // });

    // 新增---继续编辑跳转
    const gotoEdit = () => {
      router.push("/ConfirmedCasesEdit");
    };

    //表格编辑跳转页面
    const editBtn = (obj) => {
      console.log(obj, "obj");

      router.push({
        path: "/ConfirmedCasesEdit",
        query: { key: JSON.stringify(obj) },
      });
    };

    //表格每一行的高度
    const tableRowStyle = ({ row }: { row: any }) => {
      return { height: "55px" };
    };

    /* 删除---------------------------------------------- */
    const deleteTable = (row) => {
      console.log(row.patientId);

      ElMessageBox.confirm("删除后将不可恢复,是否继续此操作?", "删除确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          axios({
            method: "post",
            url: "patient/deletePatient",
            params: { patientId: row.patientId },
          }).then((res) => {
            console.log(res.data.msg);
            if (res.data.msg == "删除病例成功") {
              tableList.list = res.data.data;
              tableList.total = res.data.count;
              axios({
                method: "get",
                url: "patient/findAllPatient",
                params: {
                  currentPage: currentPage4.value,
                  pageSize: pageSize4.value,
                  area: formInline.currentResidence,
                },
              }).then((res) => {
                console.log(res, "onmo");

                tableList.list = res.data.data;
                tableList.total = res.data.count;
              });
            }
          });
          ElMessage({
            type: "success",
            message: "删除成功",
          });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "该确诊病例关联了若干数据，不支持删除操作！",
          });
        });
    };

    /* 查看详情跳转 */
    const Detail = () => {
      router.push("/ConfirmedCasesDetail");
    };

    /* 分页-------------------------------------------- */

    //切换页面数据数量
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
    };
    //页面跳转输入
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`);
      axios({
        method: "get",
        url: "patient/findAllPatient",
        params: {
          currentPage: currentPage4.value,
          pageSize: pageSize4.value,
          area: formInline.currentResidence,
        },
      }).then((res) => {
        console.log(res, "onmo");

        tableList.list = res.data.data;
        tableList.total = res.data.count;
      });
    };

    /* ----------------------------------------------------------------------------------------------------------------------- */

    return {
      formInline, // 表单数据---搜索重置模块
      // addForm, // 表单数据---新增表单的数据
      addFormName,
      addFormSex,
      addFormPostId,
      addFormTel,
      addFormAddress,
      Detail, //查看详情跳转
      editBtn, //编辑按钮
      tableRowStyle, //表格每一行的高度
      currentPage4, // 初始当前页选择页码
      pageSize4, // 每页几条数据
      small, // 分页大小
      background, //是否要分页背景
      disabled, // 是否禁用分页
      handleSizeChange, //切换页面数据数量
      handleCurrentChange, //页面跳转输入
      deleteTable, //删除表格行
      dialogFormVisible, //新增弹出框取消确定按钮关闭弹窗
      formLabelWidth, //新增弹出框宽度
      gotoEdit, //继续编辑跳转函数
      addBirth, //新增---出生日期
      value2, //登记日期选择
      disabledDate, //登记日期禁用函数
      size, //登记日期时间选择器大小
      sureAdd, //确认新增
      ...toRefs(tableList),
      daoExcel,
      search,
      // dialogTableVisible,   //暂时不知道有什么用,elementUiAPI
    };
  },
};
</script>

<style scoped lang="less">
.crumbs {
  font-size: 15px;
  height: 60px;
  width: 100%;

  display: flex;
  align-items: center;
  padding-left: 10px;
}
.box {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #f5f5f5;
  flex-direction: column;
  align-items: center;
}
.banner-box {
  width: 100%;
}
.crumbs-box {
  width: 100%;
}

/* 表单验证 */
.form {
  width: 100%;
  height: 304px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  border-radius: 5px;
}

/* 表格 */
.table {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  background-color: #fff;
  align-items: center;
  border-radius: 5px;
  margin-top: 10px;
}

.table-box {
  width: 93%;
  height: 100%;
}

.table-top {
  height: 80px;
  display: flex;
  align-items: center;
}

.download {
  height: 40px;
  display: flex;
  align-items: center;
  margin-left: 40px;
  font-size: 15px;
}

.form-text {
  width: 100px;
  text-align: center;
  font-size: 15px;
}

.el-input,
.el-select {
  width: 350px;
}
.button-box {
  width: 100%;
  display: flex;
  /* justify-content: center; */
  padding-left: 110px;
}
.el-button {
  width: 95px;
}
.el-table__row {
  height: 70px;
}

/* 分页区域 */
.table-footer {
  height: 100px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* 新增弹出框 */
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.dialog-box {
  position: fixed;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1000;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
</style>
